<script lang="ts">
import {defineComponent, watch, ref, ComponentInternalInstance} from "vue"
import FormComponent from "@/components/DynamicForm/FormComponent.vue";
import {Ref, UnwrapRef} from "@vue/reactivity";

export default defineComponent({
  name: "DrawerForm",
  components: {FormComponent},
  emits: {
    change: (field: string, value: any, rule: any[], fApi: object, setFlag: boolean) => true,
    reload: (instance: ComponentInternalInstance) => true,
    close: (value: any) => true,
    success: (value: any) => true,
    config: (value: any) => true
  },
  props: {
    size: {//请求参数
      type: String,
      default() {
        return '720px'
      }
    },
  },
  setup(props, {emit, expose}) {
    const formInfo = ref({state: false, api: '', query: {}})

    /**
     * 抽屉状态
     */
    const drawer = ref(false)


    watch(() => drawer.value, function (value) {
      if (!value) {
        formInfo.value = {state: false, api: '', query: {}}
      }
    })


    function open(api: string, query: any = {}) {
      drawer.value = true
      formInfo.value = {state: true, api: api, query: query}
    }

    /**
     * 表单实例
     */
    const form: Ref<UnwrapRef<any>> = ref(null)

    /**
     * 表单配置
     */
    const option = ref({
      disabled: false,
      inline: false,
      labelPosition: "left",
      labelWidth: "80px"
    })


    /**
     * 内部表单配置
     * @param event
     */
    function configLoad(event: any) {
      option.value = event.option.form
    }

    /**
     * 提交表单
     */
    function submitForm() {
      form.value.submitData()
    }

    /**
     * 实例加载完成事件
     * @param event
     */
    function refOnload(event: any) {
      form.value = event
    }


    /**
     * 成功提交事件
     * @param value
     */
    function eventSuccess(value: any) {
      emit('success', value)
      closeDrawer()
    }


    /**
     * 关闭弹窗
     */
    function closeDrawer() {
      drawer.value = false
    }

    expose({open})
    return {
      configLoad,
      option,
      submitForm,
      refOnload,
      eventSuccess,
      drawer,
      formInfo,
      closeDrawer
    }
  }
})
</script>

<template>
  <el-drawer destroy-on-close :size append-to-body :close-on-click-modal="false" :close-on-press-escape="false" v-model="drawer" :with-header="false">
    <div class="drawer-form" v-loading="formInfo.state===false">
      <el-scrollbar style="padding-right: 15px" height="calc(100vh - 75px)">
        <form-component popup v-if="formInfo.state" @close="closeDrawer" @success="eventSuccess" :ref="refOnload" @config="configLoad" :api="formInfo.api" :query="formInfo.query"/>
      </el-scrollbar>
    </div>
    <div class="form-footer" :style="{'padding-left':option.labelWidth}">
      <el-space>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button type="danger" @click="closeDrawer">取消</el-button>
      </el-space>
    </div>
  </el-drawer>
</template>
<style lang="scss" scoped>
.form-footer {
  box-sizing: border-box;
  margin-top: 10px;
}
</style>